<template>
    <div style="position: relative;">
        <div style="background-color:#FFF ;width:98%;margin:auto;margin-top:1%;padding:5% 0;">
            <!-- 充值规则 -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="关联商家" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择关联商家" style="width:20%;margin-left:2%">
                        <el-option label="关联商家1" value="1"></el-option>
                        <el-option label="关联商家2" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="储蓄金额" prop="name">
                    <el-input @change="moneyAdd" v-model="ruleForm.name" style="width:20%;margin-left:2%"></el-input>
                </el-form-item>
                <el-form-item label="赠送金额" prop="name2">
                    <el-input @change="moneyAdd" v-model="ruleForm.name2" style="width:20%;margin-left:2%"></el-input>
                </el-form-item>
            </el-form>

            <!-- 优惠券 -->
            <div class="discountCoupon">
                <div style="font-size:14px;text-align: right;width:90px;color:#606266;font-weight: 700;">
                    优惠券
                </div>

                <div style="width:65%;margin-left:2%">
                    <el-table :data="tableData" style="width: 100%">

                        <el-table-column label="券名称" width="280">
                            <template slot-scope="scope">
                                <span>{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="库存" width="200">
                            <template slot-scope="scope">
                                <span>{{ scope.row.lastTotal }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="数量" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.nub" style="width:50%"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="addDiscountCoupon" @click="showCoupon">
                <i class="el-icon-circle-plus-outline" style="margin-right:20px"></i>
                <div> 添加优惠券 </div>
            </div>

            <div style="padding-left:100px;margin-top:40px">
                <el-button style="width:120px;margin-right:40px">取消</el-button>
                <el-button type="primary" style="width:120px">保存</el-button>
            </div>
        </div>

        <div class="newCoupon" v-show="newCouponActivate" >
            <div class="discountCouponList" @click.stop="">
                <div style="font-size:15px;margin-bottom:20px;font-width:700;padding-left: 20px;">选择优惠券</div>
                <div class="selectDiscountCoupon">
                    <div style="display:flex">
                        <div style=" width:30%;margin:auto 0">券标题</div>
                        <el-input v-model="input" placeholder="请选择券类型" style="margin-right:20px"></el-input>
                    </div>
                    <div style="display:flex">
                        <div style=" width:30%;margin:auto 0">券类型</div>
                        <el-select v-model="value" placeholder="请选择券类型">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="display:flex;margin-left:20px">
                        <el-button style="background-color:rgb(88,99,222);color:#fff;margin-right:10px">查询</el-button>
                        <div style="border-bottom:1px solid #000;width:25px;margin:auto 0">重置</div>
                    </div>
                </div>
                <div>
                    <div style="background-color:rgb(254,249,236);padding:10px 20px">
                        已选择0项
                    </div>
                    <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="padding-left: 20px;"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="100">
                        </el-table-column>
                        <el-table-column label="券标题" width="200">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>
                        <el-table-column prop="lastTotal" label="库存" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="receiveStartTime" label="生效日期" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="receiveEndTime" label="失效日期" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </div>
                <div style=" text-align: right;padding-right:100px;margin-top:20px;margin-bottom:20px">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                    </el-pagination>
                    <div style="margin-top:20px">
                        <el-button @click="newCouponActivate = false">取消</el-button>
                        <el-button style="background-color:rgb(88,99,222);color:#fff;margin-right:10px">确认</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// import { getCouponList } from '@/api/chongzhi'
import { marketingListApi  } from '@/api/marketing'
export default {
    name: 'ChuzhiSet',
    data() {
        return {
            newCouponActivate: false,
            pageSizes: 10,
            pageTotal: 0,
            pageIndex: 0,
            ruleForm: {
                name: '',
                name2: '',
                region: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入储蓄金额', trigger: 'blur' },
                    { min: 1, max: 5, message: '请填写大于0小于10000的整数', trigger: 'blur' }
                ],
                name2: [
                    { required: true, message: '请输入赠送金额', trigger: 'blur' },
                    { min: 1, max: 5, message: '赠送金额许小于储蓄金额', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
            },

            //优惠券列表
            tableData: [],
            params: {
                page: 1,
                limit: 10,
                status: 1,
                type: 3
            },
            input: '',
            options: [],
            value: '',
            tableData1: [],
            multipleSelection: [],
            currentPage4: 1,

        }
    },
    methods: {
        async showCoupon() {
            const res = await marketingListApi(this.params)
            if (res.list.length > 0) {
                this.tableData = res.list
            } else {
                this.$message.info('请先添加赠送优惠券')
            }
        },
        handleSelectionChange(val) {
            val.forEach(i => {
                this.multipleSelection.push(i.id, i.status)
            })
            this.multipleSelection = Array.from(new Set(this.multipleSelection))

            console.log(this.multipleSelection, val)
        },
        async handleSizeChange(val) {
            this.params.pageSizes = val
            let res = await getCouponList(limit, page)

            this.pageTotal =this.tableData.length
            this.tableData1 = res.list.filter((item => {
                return item.type == 3
            }))

            console.log(`每页 ${val} 条`, this.pageSizes);
        },
        async handleCurrentChange(val) {
            this.pageIndex = val

            let limit = this.pageSizes
            let page = this.pageIndex

            let res = await getCouponList(limit, page)

            this.pageTotal =this.tableData.length
            this.tableData1 = res.list.filter((item => {
                return item.type == 3
            }))
            console.log(`当前页: ${val}`, this.pageIndex);
        },
        moneyAdd() {
            if (this.ruleForm.name < this.ruleForm.name2) {
                this.$message.error('赠送金额必须小于充值金额');
            }
        }
    },
    async created() {
        // //加载页面获取所有的优惠券
        // let limit = '0'
        // let page = '1'
        // let res = await getCouponList(limit, page)
        // this.pageTotal =this.tableData.length
        // //只要激活的和赠送券的券
        // // tableData 优惠券列表
        // this.tableData = res.list.filter((item => {
        //     return item.status && item.type == 3
        // }))
        // // tableData1 编辑优惠券列表
        // this.tableData1 = res.list.filter((item => {
        //     return item.type == 3
        // }))
        // console.log(res, '----------66666666666666------------')
    }
}
</script>

<style lang="scss" scoped>
.discountCoupon {
    display: flex;

}

.el-table__header-wrapper {
    background-color: #ccc !important;
}

.addDiscountCoupon {
    display: flex;
    font-size: 15px;
    color: rgb(88, 99, 222);
    padding-left: 120px;
    margin-top: 20px;

}

.newCoupon {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(#000, 0.3);
    padding-top: 80px;
    padding-bottom: 20px;
    z-index: 9999;

    .discountCouponList {
        margin-top: 20px;
        padding-top: 20px;
        background-color: #fff;
        width: 70%;
        height: 100%;
        margin: 0 auto;
        padding-bottom: 20px;
        margin-top: 50px;

        .selectDiscountCoupon {
            display: flex;
            padding-left: 20px;
            margin-bottom: 20px;

        }
    }
}
</style>